<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台系统</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/my-style.css">
</head>

<body>
    <div class="kit-doc">
		<div class="layui-row">
			<div class="layui-col-md12 layui-card">
				<div class="layui-card-header"><i class="fa fa-bars"></i>&nbsp;设置基本信息</div>
				<div class="layui-form" action="" style="margin-top: 20px;">
					<input type="hidden" id="userId" th:value="${user.getId()}">
			  <div class="layui-form-item">
				<label class="layui-form-label">登录名</label>
				<div class="layui-input-inline">
				  <input type="text" name="loginName" required  lay-verify="required" placeholder="请输入登录名" autocomplete="off" class="layui-input" th:value="${user.loginName}">
				</div>
				<div class="layui-form-mid layui-word-aux">辅助文字</div>
			  </div>
					<div class="layui-form-item">
						<label class="layui-form-label">真实姓名</label>
						<div class="layui-input-inline">
							<input type="text" name="userName" required  lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input" th:value="${user.userName}">
						</div>
						<div class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">性别</label>
						<div class="layui-input-inline">
							<select name="sex" lay-verify="required" id="sex">
								<option th:value="${user.getSex() eq '0'? '1':'0'} " th:text="${user.getSex() eq '0'?'女':'男'}"></option>
								<option th:value="${user.getSex()} " th:text="${user.getSex() eq '0'?'男':'女'}"></option>

							</select>
						</div>
					</div>
			  <div class="layui-form-item">
				<label class="layui-form-label">手机</label>
				<div class="layui-input-inline">
				  <input  name="phonenumber" lay-verify="phone" autocomplete="off" class="layui-input" type="tel" th:value="${user.phonenumber}">
				</div>
			  </div>
			  <div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-inline">
				  <input name="email" lay-verify="email" autocomplete="off" class="layui-input" type="text" th:value="${user.email}">
				</div>
			  </div>

			  <div class="layui-form-item">
				<div class="layui-input-block">
				  <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			  </div>
			</div>
			</div>
			
		</div>
    </div>
    
    
    <script src="/plugins/layui/layui.js"></script>
 	<!-- 表单 -->
	<script>
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate;

				//日期
				laydate.render({
					elem: '#date'
				});
				laydate.render({
					elem: '#date1'
				});

			});
		layui.use('upload', function(){
		  var $ = layui.jquery
		  ,upload = layui.upload;
        });

	</script>
	<script>
        // 增加项目表单
        layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            //常规用法
            laydate.render({
                elem: '#startDate'
            });
            laydate.render({
                elem: '#endDate'
            });

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                title: function (value) {
                    if (value.length < 5) {
                        return '标题至少得5个字符啊';
                    }
                }
                , pass: [/(.+){6,12}$/, '密码必须6到12位']
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });


            var $ = layui.$;
            //监听提交
            form.on('submit(formDemo)', function (data) {
                console.log(data.field);
                $.ajax({
                    type: 'PUT',
                    url: "/system/user/" + $("#userId").val(),
                    data: data.field,
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg("修改成功",{
                                time: 800
                            },function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg("修改失败" + data.msg);
                        }
                    }
                });

                return false;
            });


        });
	</script>
</body>

</html>